<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Github用户搜索案例</h3>
    <div>
      <input
        type="text"
        placeholder="请输入名字"
        v-model="keyword"
      />&nbsp;<button @click="handleClick">搜索</button>
    </div>
  </section>
</template>

<script> 
  import axios from 'axios'

  export default {
    name: "Search",
    data() {
      return {
        keyword:''
      }
    },
    methods: {
      async handleClick(){
        try {
          // github给我们提供的请求地址为：https://api.github.com/search/users?q=xxx
          let response = await axios.get('https://api.github.com/search/users?q='+this.keyword)
          // 通过$bus将用户列表传递给List组件
          this.$bus.$emit('get-users',response.data.items)
        } catch (error) {
          alert('阿偶，请求出错了，请联系管理员！')
        }
      }
    },
  };
</script>